<script setup>
import { ref } from 'vue'
import { ChangeNodeService } from '@/api/node.js'
// import { admin } from '../admin.vue'
const visibleDrawer = ref(false)

const nodeInfo = ref({
  // 节点编号
  id: -1,
  // 节点名称
  name: '',
  // 执行模式
  mode: 'stream流',
  // 地址
  addr: '',
  // 输出地址
  destAddr: '',
  // 输出账号
  destUsername: '',
  // 账号密码
  destPassword: '',
  // topic
  topic: '',
  // 对应用户编号
  userId: -1
})
// const showPassword = ref(false)

// 显示弹窗
const open = (data) => {
  nodeInfo.value = { ...data }
  console.log(nodeInfo.value)
  visibleDrawer.value = true
}

// 重置节点操作
const onSetNode = () => {
  nodeInfo.value.name = ''
  nodeInfo.value.mode = 'stream流'
  nodeInfo.value.addr = ''
}

// 校验节点信息
const nodeForm = ref()

// 设置规则
const rules = {
  name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  addr: [
    { required: true, message: '输出地址信息不能为空', trigger: 'blur' },

    {
      validator: (rule, value, callback) => {
        if (!value || value.length === 0) {
          callback(new Error('输出地址格式不正确'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  destPassword: [
    { required: false, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
    // {
    //   pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,12}$/,
    //   message: '密码必须包含字母和数字,长度在6到12个字符',
    //   trigger: 'blur'
    // }
  ]
}

// 取消操作
const cancelEditNode = () => {
  visibleDrawer.value = false
  onSetNode()
}

// 清除校验数据
const resetForm = () => {
  nodeForm.value.clearValidate()
}

// 修改节点并关闭弹窗
const emit = defineEmits(['success'])

/// 更新节点的函数
const updateNode = async () => {
  let isValid = false

  try {
    // 重置校验状态
    await nodeForm.value.clearValidate()

    // 触发校验
    await nodeForm.value.validate((valid, fields) => {
      if (valid) {
        isValid = true
      } else {
        console.log('validation failed', fields) // 输出未通过验证的字段信息
        throw new Error('表单验证失败')
      }
    })

    // 显式检查校验状态
    if (!isValid) {
      throw new Error('表单验证未通过，请检查输入')
    }

    // 校验通过后，才继续执行
    const confirmed = await ElMessageBox.confirm('确认提交修改?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })

    if (confirmed) {
      // 再次检查校验状态
      if (!isValid) {
        throw new Error('表单状态已改变，请重新提交')
      }

      // 调用修改节点的服务接口
      const res = await ChangeNodeService(nodeInfo.value)

      if (res.data.code === 200) {
        ElMessage({
          type: 'success',
          message: '节点修改成功'
        })

        // 关闭弹窗，重置信息
        visibleDrawer.value = false

        // 成功回调
        emit('success')

        // 清除编辑状态
        cancelEditNode()
      } else {
        throw new Error(`节点修改失败：${res.data.message || '未知错误'}`)
      }
    }
  } catch (error) {
    console.error('Error in updateNode:', error)
    ElMessage.error(error.message || '修改节点时发生错误')
  }
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="visibleDrawer"
    title="修改节点"
    direction="rtl"
    width="450"
    style="background-color: rgb(27, 31, 56); color: white"
    @open="resetForm"
  >
    <el-form
      :model="nodeInfo"
      :rules="rules"
      ref="nodeForm"
      size="large"
      autocomplete="off"
      @close="resetForm"
    >
      <el-form-item prop="name">
        <div style="color: white">
          节点名称:
          <input
            type="text"
            v-model="nodeInfo.name"
            placeholder="节点名称"
            style="margin-left: 20px"
          />
        </div>
      </el-form-item>
      <el-form-item prop="destAddr">
        <div style="color: white">
          输出地址:
          <input
            type="text"
            v-model="nodeInfo.destAddr"
            placeholder="输出地址"
            style="margin-left: 20px"
          />
        </div>
      </el-form-item>
      <el-form-item prop="destUsername">
        <div style="color: white">
          输出账号:
          <input
            type="text"
            v-model="nodeInfo.destUsername"
            placeholder="输出账号"
            style="margin-left: 20px"
          />
        </div>
      </el-form-item>
      <el-form-item prop="destPassword">
        <div style="color: white" class="passwordbox">
          <span class="passlab">账号密码:</span>
          <input
            type="password"
            :show-password="true"
            v-model="nodeInfo.destPassword"
            placeholder="账号密码"
            style="background-color: rgb(58, 65, 106); margin-left: 25px"
          />
        </div>
      </el-form-item>
    </el-form>

    <div style="margin-top: 50px; margin-left: 50px">
      <el-button type="primary" @click="updateNode" style="width: 130px"
        >提交修改</el-button
      ><el-button
        @click="cancelEditNode"
        style="width: 100px; margin-left: 50px"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
h1 {
  margin: 0;
  padding: 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fff;
  background-color: rgba(148, 144, 144, 0.3) 25;
}

:deep .el-dialog__title {
  color: white !important;
}
.header {
  display: flex;
}

.table {
  box-sizing: content-box;
}

ul {
  padding: 20px 20px;
  display: flex;
  align-items: stretch;
  // background-color: rgb(49, 56, 98);
  margin-bottom: 20px;
  // align-content: center;
  align-items: center;
  // justify-content: center;
}

ul li {
  list-style: none;
  // margin-bottom: 20px;
  padding: 0;
  // line-height: 60px;
}

.select_box {
  /* 默认placeholder样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 30px;
  }

  /* 默认框状态样式更改 */
  :deep .el-input__wrapper {
    // width: 240px;
    height: 45px;
    color: #4b617a;
    background-color: rgb(58, 65, 106) !important;
    box-shadow: none !important;
    /* 使用none替代透明边框 */
  }

  /* 修改下拉框focus时的样式 */
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #8091a5 inset !important;
  }

  /* 清除按钮颜色 */
  // :deep .el-select__caret {
  //   color: #fff !important;
  // }

  /* 选中字体色 */
  :deep .el-input__inner {
    color: #fff !important;
  }
}

/* 下拉框-展开样式 */
/* 展开下拉背景及边框 */
:deep .el-popper {
  background-color: #8091a5 !important;
  border: 1px solid #8091a5 !important;
}

/* 下拉项hover样式 */
.el-select-dropdown__item.hover {
  background-color: #4b87dbe0 !important;
}

/* 下拉项颜色 */
.el-select-dropdown__item {
  color: #fff !important;
  text-align: center;
  background-color: #435984;
}

/* 箭头按钮样式（通常不需要修改背景色，只修改边框色即可） */
:deep .el-popper .el-popper__arrow::before {
  border-top-color: #fff !important;
  /* 修改箭头边框颜色 */
}
.add-task {
  width: 273px;
  height: 123px;
  text-align: center;
  line-height: 123px;
  color: #727070;
  border-radius: 3px;
  border: #727070 solid 1px;
  cursor: pointer;
  margin-left: 15px;

  &:hover {
    border-color: #fff;
    color: #fff;
  }
}

//滚动条
/* 定制滚动条的整体部分 */
::-webkit-scrollbar {
  width: 12px;
}

/* 定制滚动条的轨道 */
::-webkit-scrollbar-track {
  background: #e1e9f0; /* 更浅一些的蓝色 */
}

/* 定制滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #3f527d; /* 深蓝色 */
}

/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #3b5ba0; /* 更深一点的蓝色 */
}

input {
  padding-left: 10px;
  /* width: 273px;/ */
  /* width: 200px; */
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}

//下拉框
/* styles/custom-elements.css */
.el-select .el-input .el-input__inner {
  background-color: #33608f !important; /* 背景颜色 */
  color: #ffffff; /* 文字颜色 */
  border-color: #213c58; /* 边框颜色 */
}

.el-select .el-input .el-input__inner:hover {
  border-color: #0056b3; /* 鼠标悬停时的边框颜色 */
}

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input.is-active .el-input__inner {
  border-color: #0056b3; /* 获得焦点时的边框颜色 */
}

.el-select-dropdown {
  background-color: #007bff; /* 下拉菜单背景颜色 */
}

.el-select-dropdown li {
  color: #ffffff; /* 下拉菜单文字颜色 */
}

.el-select-dropdown li.hover,
.el-select-dropdown li:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.passwordbox {
  :deep .el-input__wrapper {
    width: 190px;
    height: 45px;
    color: #4b617a;
    // margin-left: 20px;
    background-color: rgb(58, 65, 106) !important;
    box-shadow: none !important;
    /* 使用none替代透明边框 */
  }
}

.passlab {
  width: 100px;
  // background-color: black;
}

input {
  width: 240px;
}
</style>
